<template>
    <div>
        <img :src="headImg" alt="head-img" class="head-img">
        <Form @submit="onSubmit">
            <Field
                    v-model="name"
                    name="姓名"
                    label="姓名"
                    placeholder="真实姓名"
                    :rules="[{ required: true, message: '请填写真实姓名' }]"
                    class="input-box margin"
            />
            <Field
                    v-model="IDCADE"
                    type="digit"
                    name="身份证"
                    label="身份证"
                    placeholder="身份证号码"
                    :rules="[{ required: true, message: '请填写' }]"
                    class="input-box"
            />
            <Field
                    v-model="code"
                    type="number"
                    name="验证码"
                    label="验证码"
                    placeholder="短信验证码"
                    :rules="[{ required: true, message: '请填写' }]"
                    class="input-box"
            >
                <template #button>
                    <Button size="small" :disabled="disabled" @click="sendCode">{{text}}</Button>
                </template>
            </Field>
            <div class="info-box"><span>短信验证码将发送至</span><span class="mobile">180 **** 5</span></div>
            <Button text="立即认证" color="#0DCDB5" native-type="submit" class="outh-btn"/>
        </Form>
    </div>
</template>

<script>
    import {Field, Form,Button} from 'vant';

    const loadImg = name => require(`@/assets/images/${name}.png`)
    export default {
        name: "RealNameOuth",
        components: {
            Field,
            Form,
            Button
        },
        data() {
            return {
                headImg: loadImg('real_name_outh'),
                name:'',
                code:'',
                IDCADE:'',
                text:'获取验证码',
                disabled:false
            }
        },
        methods:{
            sendCode() {
                if (this.disabled) return;
                this.disabled = true;
                let n = 60;
                this.text = "剩余 " + n + "s";
                const run = setInterval(() => {
                    n = n - 1;
                    if (n < 0) {
                        clearInterval(run);
                    }
                    this.text = "剩余 " + n + "s";
                    if (this.text < "剩余 " + 0 + "s") {
                        this.disabled = false;
                        this.text = "重新获取";
                    }
                }, 1000);
            },
            onSubmit(values) {
                console.log('submit', values);
                this.$router.push('outhInfo')
            },
        }
    }
</script>

<style scoped lang="scss">
    .head-img {
        display: block;
        height: 145px;
    }
    .margin{
        margin-top: 40px;
    }
    .input-box{
        width:335px;
        height:50px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .info-box{
        font-size:14px;
        font-weight:400;
        color:rgba(163,165,177,1);
        text-align: center;
        .mobile{
            color: #42455F;
        }
    }
    .outh-btn{
        width:305px;
        height:50px;
        border-radius:6px;
        display: block;
        margin: 50px auto 0;
    }
</style>
